<html>
    <head>
        <title>v-if </title>
    </head>
    <body>
        <script>
                      // ★ v-if
                             
                                    /*
                                        v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式放回 truthy 值得时候被渲染。

                                             eg:  <h1 v-if="awesome">Vue is awesome!</h1>


                                        也可以用  v-else 添加一个 "else"块：
                                        
                                             eg:
                                                  <h1 v-if="awesome">Vue is awesome!</h1>
                                                  <h1 v-else>Oh no</h1>
                                    */  
                                    

                                // ★一、在<template>元素上使用 v-if 条件渲染分组
                                    
                                        /*
                                            因为 v-if 是一个指令，所以必须将它添加到一个元素上。
                                            但是如果想切换多个元素呢？ 此时可以把一个<template>元素当做不可见的"包裹元素"，并在上面使用 v-if。最终的渲染结果将不包含<template>元素。

                                                eg: <template v-if="ok">
                                                        <h1>Title</h1>
                                                        <p>Paragraph 1</p>
                                                        <p>Paragraph 2</p>
                                                    </template>
                                        */

                                // ★二、v-else
                                        
                                        /*
                                            你可以使用 v-else 指令来表示 v-if 的"else 块"

                                                eg:
                                                    <div v-if="Math.random() >0.5">
                                                        Now you see me
                                                    </div>
                                                    <div v-else>
                                                        Now you don't
                                                    </div>

                                                v-else 元素必须紧跟在带 v-if 元素 或者 v-else-if 的元素之后，否则它将不会被识别。    
                                        */


                                // ★三、 v-else-if  
                                        
                                         /*
                                             v-else-if  顾名思义，充当v-if 的 "else if 块"，可以连续使用：

                                                    eg:
                                                        <div v-if="type ==='A'">
                                                            A
                                                        </div>
                                                        <div v-else-if="type ==='B'">
                                                            B
                                                        </div>
                                                        <div v-else-if="type ==='C'">
                                                            C
                                                        </div>
                                                        <div v-else>
                                                            Not A/B/C
                                                        </div>

                                                类似于 v-else ，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后.        
                                         */
                                
                                // ★四、 用 key 管理复用的元素
                                             
                                        /*
                                             Vue 会尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。
                                             这么做出了事Vue变得非常快之外，还有其他一些好处。
                                             例如，如果你袁旭用户在不同的登录方式之间切换：

                                                    eg：
                                                        <template v-if="loginType=== 'username'">
                                                            <label>Username</label>
                                                            <input palceholder="Enter your username">
                                                        </template>
                                                        <template v-else>
                                                            <label>Email</label>
                                                            <input placehodler="Enter your email">
                                                        </template>

                                                 那么，在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉-----仅仅是替换了它的placeholder.


                                                 这样也不总是复合实际需求，所以Vue 为你提供了一种方式来表达 "这两个元素是完全独立的，不要复用它们"。
                                                 这时候，只需要添加一个具有唯一值的 key atrribute即可：

                                                    eg:
                                                        <template v-if="loginType==='username'">
                                                            <lable>Username</label>
                                                            <input  placeholder="Enter your username " key="username-input">
                                                        </template>
                                                        <template v-else>
                                                            <label>Email</label>
                                                            <input placeholder="Enter your email address" key="email-input">
                                                        </template>

                                                     现在，每次切换时，输入框都将被重新渲染，不会再被复用。
                                                     注意： <label>元素仍然会被高效地复用，因为他们没有添加 key 属性
                                        */


                            // ★五、 v-if 与 v-for一起使用

                                        /*
                                                不推荐v-if 和 v-for 同时使用。

                                                当 v-if  与 v-for 一起使用时， v-for 具有比 v-if 更高的优先级。
                                        */
        </script>
    </body>
</html>